<template>
  <a-modal :width="750" :visible="visible" @cancel="handleCancel" :footer="false">
    <template #title>
      查询历史
    </template>
    <a-list class="query-history" :max-height="550" :scrollbar="true">
      <a-list-item v-for="(item,index) in dataList" :key="index">
        <a-list-item-meta>
          <template #title>
            {{ item.sql }}
          </template>
          <template #description>
            <a-space>
              <a-tag size="small" style="color: var(--color-neutral-8)">
                <template #icon>
                  <icon-history/>
                </template>
                {{ item.time }}
              </a-tag>
              <a-tag v-if="item.status==='success'" color="green" size="small">
                <template #icon>
                  <icon-check-circle/>
                </template>
                用时: {{ item.spend }}ms
              </a-tag>
              <a-tag v-if="item.status==='error'" color="red" size="small">
                <template #icon>
                  <icon-close-circle/>
                </template>
                执行失败
              </a-tag>
            </a-space>
          </template>
        </a-list-item-meta>
      </a-list-item>
    </a-list>
  </a-modal>
</template>

<script setup lang="ts">
import {reactive, ref} from 'vue';

const dataList: any[] = reactive([])
const visible = ref(false);

const show = (queryHistoryList) => {
  dataList.splice(0, dataList.length)
  queryHistoryList.forEach(item => {
    dataList.push(item);
  })
  visible.value = true
}

const handleCancel = () => {
  visible.value = false;
}


defineExpose({
  show
})


</script>

<style>

.query-history .arco-list-item{
  padding: 8px 20px 5px 10px!important;
}

.query-history .arco-list-item-meta-title{
  margin-bottom: 10px !important;
}

</style>
